<template>
  <div class="index">
    <el-container>
      <el-header>
        <p>
          <el-image
            src="http://120.53.31.103:84/uploads/image/2020-05-27/zmkrHVxaa4fVI5jtcNZ3xGy6KPU0QjXzxPjX7trh.jpeg"
          ></el-image>
        </p>
        <el-menu
          router
          :default-active="actpath"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item
            v-for="(item, index) in navInfo"
            :key="index"
            :index="actpath + '/' + item.menu_url"
            @click="savenavstate(index, actpath + '/' + item.menu_url)"
          >
            <i :class="iconslist[item.id]"></i> {{ item.title }}
          </el-menu-item>
        </el-menu>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo img"
          mode="horizontal"
          menu-trigger="click"
          @select="handleSelect"
          background-color="transparent"
        >
          <el-submenu index="2">
            <template slot="title">
              <el-avatar :src="loginUser.avatar"></el-avatar>
              <i class=" el-icon-caret-bottom"></i>
            </template>
            <el-menu-item index="2-1">
              <el-avatar :src="loginUser.avatar"></el-avatar>
            </el-menu-item>
            <el-divider>{{ loginUser.nickname }}</el-divider>
            <el-menu-item index="2-2"
              ><i class="el-icon-s-tools"></i> 账号设置</el-menu-item
            >
            <el-menu-item @click="logOut"
              ><i class="el-icon-ship"></i> 退出登录</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: "1",
      // 导航数据
      navInfo: [],
      // 管理员信息
      loginUser: {},
      // 菜单icon
      iconslist: {
        300: "el-icon-user-solid",
        97: "el-icon-reading",
        1000: "el-icon-notebook-2",
        135: "el-icon-s-marketing",
        121: "el-icon-menu",
        200: "el-icon-shopping-cart-full",
        124: "el-icon-truck",
        174: "el-icon-pie-chart",
        181: "el-icon-s-tools"
      },
      // 被激活的链接地址
      actpath: "/index",
      // 被激活的导航下标
      actIndex: ""
    };
  },
  created() {
    // 管理员信息
    this.loginUser = this.$store.state.loginUser;
    // 导航信息
    this.navInfo = this.$store.state.navInfo;
    // 查找链接激活状态
    this.actIndex = sessionStorage.getItem("actIndex");
  },
  mounted() {
    this.getNavInfo();
  },
  methods: {
    // 退出登录
    logOut() {
      this.$confirm("您确认退出登录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "退出成功！"
          });
          sessionStorage.clear();
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "您已取消退出!"
          });
        });
    },
    // 获取导航数据
    async getNavInfo() {
      let { data: res } = await this.$axios.navInfo();
      console.log(res);
      if (res.code != 200) {
        this.$message.error(res.msg);
      } else {
        // this.$message.success(res.msg);
        // this.navInfo = res.rows;
        this.$store.commit("getNavInfo", res.rows);
        console.log(this.$store.state.navInfo);
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    // 保存链接激活状态
    savenavstate(actIndex, actpath) {
      console.log(actIndex);
      console.log(actpath);
      sessionStorage.setItem("actIndex", actIndex);
      sessionStorage.setItem("actpath", actpath);
      this.actIndex = actIndex;
      // this.actpath = actpath;
    }
  }
};
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  height: 100%;
  // background: transparent;
  & > .el-container {
    width: 100%;
    height: 100%;
    & > .el-header {
      background-image: linear-gradient(
        143deg,
        #2945cb 20%,
        #2b83f9 81%,
        #3a9dff
      );
      color: #333;
      line-height: 60px;
      display: flex;
      padding: 0;
      & > p {
        box-sizing: border-box;
        width: 170px;
        padding: 0 55px;
        & > .el-image {
          height: 40px;
          vertical-align: middle;
        }
      }
      .el-menu-item {
        padding: 0 12px;
      }
      & > .img {
        position: absolute;
        top: 0;
        right: 0;
        .el-submenu__title,
        .el-submenu:hover {
          background: transparent !important;
        }
      }
    }

    & > .el-main {
      width: 100%;
      height: 100%;
      padding: 0;
    }
  }
}
.el-menu.el-menu--horizontal {
  border-bottom: solid 1px transparent;
}
.el-menu-item:hover {
  background: transparent !important;
}
</style>
